import React, { Component } from "react"
import PropTypes from "prop-types"
import "./Item.css"
// export default class Item extends Component {
//   render(props) {
//     return (
//       <li>
//         <p className="test">{this.props.xxx.name}</p>
//         <p className="test">{this.props.xxx.content}</p>
//       </li>
//     )
//   }
// }

// export default function Item (props){
//   return <li>
//   <p className="test">{props.xxx.name}</p>
//   <p className="test">{props.xxx.content}</p>
//   </li>
// }

export default class Item extends Component {
  static propTypes = {
    list: PropTypes.array.isRequired,
  }
  static defaultProps = {
    list: [
      {
        id: 1,
        name: "xx",
        content: "喜欢出去玩，喜欢吃零食",
      },
    ],
  }
  render() {
    return (
      <ul>
        {this.props.list.map((item) => {
          console.log(item);
          return (
            <li key={item.id}>
              <p>{item.name}</p>
              <p>{item.content}</p>
              <this.props.xxx></this.props.xxx>
            </li>
          )
        })}
      </ul>
      
    )
  }
}
